function ajax(config) {
    let { url, method, data, bodyType, onSuccess, onFail } = config
    const xhr = new XMLHttpRequest()
    xhr.open(method, url)

    // url拼接参数
    if (method === "GET") {
        let queryString = ""
        for (let key in data) {
            queryString += `${key}=${data[key]}&`
        }
        url += `?${queryString.slice(0, -1)}`
    }

    // 设置body
    else {
        // 表单的数据的body格式与查询参数相同
        if (bodyType === "form") {
            xhr.setRequestHeader(
                "Content-Type",
                "application/x-www-form-urlencoded"
            )

            // a=1&b=2
            let queryString = ""
            for (let key in data) {
                queryString += `${key}=${data[key]}&`
            }
            body = queryString.slice(0, -1)
        }

        // 表单的数据的body格式与查询参数相同
        if (bodyType === "json") {
            xhr.setRequestHeader(
                "Content-Type",
                "application/json"
            )
            body = JSON.stringify(data)
        }
    }

    // xhr.onreadystatechange = e => {
    //     console.log("xhr.readyState",xhr.readyState);
    //     console.log("xhr.status",xhr.status);
    //     console.log("xhr.responseText",xhr.responseText);
    // }

    // readyState为4 且status为200+时触发
    xhr.onload = e => {
        console.log("onload", e.target.responseText);
        onSuccess && onSuccess(e.target.responseText)
    }

    // readyState为4 且status为0时触发
    xhr.onerror = e => {
        console.log("onerror", e);
        onFail && onFail(e)
    }

    xhr.send(body)
}

/* ajaxPromise */
function myAxios(config) {
    return new Promise(
        (resolve, reject) => {
            // 调用ajax
            // 在成功回调中resolev
            // 在失败回调中reject
            ajax({
                ...config,
                onSuccess: data => resolve(data),
                onFail: err => reject(err)
            })
        }
    )
}

// myAxios({
//     url: "http://httpbin.org/post123",
//     method: "POST",
//     data: {
//         a: 1,
//         b: 2
//     },
//     bodyType: "json",//form
//     // onSuccess(data) {
//     //     console.log("请求成功", data);
//     // },
//     // onFail(err) {
//     //     console.log("请求失败", err);
//     // }
// }).then(
//     data => console.log("then:请求成功", data)
// ).catch(
//     err => console.log("catch:请求失败", err)
// ).finally(
//     () => console.log("请求结束")
// )

~async function () {

    try {
        let data = await myAxios({
            url: "http://httpbin.org/post123",
            method: "POST",
            data: {
                a: 1,
                b: 2
            },
            bodyType: "json",//form
            // onSuccess(data) {
            //     console.log("请求成功", data);
            // },
            // onFail(err) {
            //     console.log("请求失败", err);
            // }
        })

        console.log("then:请求成功", data)
    } catch (err) {
        console.log("catch:请求失败", err)
    }

    console.log("请求结束")

}()